
import Taro , { Component } from '@tarojs/taro';
import { View, Text , Button, ScrollView} from '@tarojs/components';
import { MessageBoxUtil } from '@/utils/messageBoxUtil'

import './index.scss'

class Index extends Component {
  confirmCallback = null
  cancelCallback = null
  state={
    show: false,
    showBtnWrap: true,
    showCancel: true,
    showConfirm: true,
    title: '提示',
    msg: '',
    confirmText: '确定',
    cancelText: '取消',
  }

  componentDidMount() {
    MessageBoxUtil.listen(this.setAttr, this)
  }

  componentWillUnmount() {
    MessageBoxUtil.remove(this.setAttr, this)
  }

  setAttr({ content, show, title, confirmText, cancelText, confirmCallback, cancelCallback }) {
    this.setState({ 
      show,
      title: title ? title : '标题',
      confirmText: confirmText ? confirmText : '确定',
      cancelText: cancelText ? cancelText : '取消',
      msg: content
    }, () => {
      // this.setClassName()
    })

    this.confirmCallback = confirmCallback ? confirmCallback : null
    this.cancelCallback = cancelCallback ? cancelCallback : null
  }

  clickMask() {
    console.log('click mask');
  }

  cancel() {
    if (typeof this.cancelCallback === 'function') {
      this.cancelCallback()
    } 
    MessageBoxUtil.hide()
  }
  
  confirm() {
    if (typeof this.confirmCallback === 'function') {
      this.confirmCallback()
    }
    MessageBoxUtil.hide()
  }

  render() {
    const { show, showBtnWrap, showCancel, showConfirm, title, msg, confirmText, cancelText } = this.state
    return (
      <View>
        {
          show && (
            <View className='mask' onClick={this.clickMask}>
              <View className='dialog-content'>
                {title && <View className='title' style='width: 100%;'>{title}</View>}

                {/* 内容区域 */}
                <ScrollView scroll-y className='main-content'>{msg}</ScrollView>

                {/* 按钮区域 */}
                {
                  showBtnWrap && (
                    <View className='dialog-btn-wrapper'>
                      { showCancel && <View className='cancel-btn' onClick={this.cancel}>{cancelText}</View> }
                      { showConfirm && <View className='confirm-btn' onClick={this.confirm}>{confirmText}</View> }
                    </View>
                  )
                }
              </View>
            </View>
          )
        }
      </View>
    );
  }
}
export default Index;